<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="orderlist" v-else>
		<u-navbar leftIcon="arrow-left" title="派单列表" bgColor="#fff" leftIconColor="#000"
			:fixed="true" :titleStyle="titleStyle" @leftClick="$back"></u-navbar>
		
		<view class="top_nav" >
			<view @click="tz(0)" :style="type==0?'color:#000;font-weight:700':'color:#999'">
				我申请的
				<view class="act" v-if="type==0">
					
				</view>
			</view>
			
			<view @click="tz(1)" :style="type==1?'color:#000;font-weight:700':'color:#999'">
				选择我的
				<view class="act1" v-if="type==1">
				</view>
			</view>
		<!-- 	<view @click="tz(2)">
				匹配失败
				<view class="act2" v-if="type==2">
				</view>
			</view> -->
		</view>
		
		<view class="empytView"  v-if="list.length<=0">
			<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
			<!-- <view>- 空列表 -</view> -->
		</view>	
		
		<view class="cont" v-for="(item,index) in list" @click="$go('/task/list/my_order_dea?id='+item.id)">
			<view class="cont_s">
				<view class="con_top" v-if="item.status==0">
					<view>剩余时间：
						<wly-countdown  :hour="getDateStr(item.sy_time,1)" :minute="getDateStr(item.sy_time,2)" :second="getDateStr(item.sy_time,3)" showType="slot">
							<template v-slot="{day, hour, minute, second}">
								<view v-if="day||hour||minute||second">
						
									<view class="time_model">
										<view>
											{{hour}}
										</view>
										<view>
											:
										</view>
									</view>
									<view class="time_model">
										<view>
											{{minute}}
										</view>
										<view>
											:
										</view>
									</view>
									<view class="time_model">
										<view>
											{{second}}
										</view>
									</view>
								</view>
							</template>
						</wly-countdown>
					</view>
					<view>
						<!-- {{item.apply_num}}位写手申请 -->
						等待匹配
					</view>
				</view>
				
				<view class="con_top" v-if="item.status==1">
					匹配单号：{{item.order_sn}}
					<view class="ends">
						<text >匹配成功</text>
					</view>
				</view>
				
				
				
				
				
				<view class="con_nav">
					<view class="navs">
						<view class="icon">订</view>
						<view class="navs_right">
							<view class="tp">
								字数共计{{item.tran_font_num}}{{item.tran_font_word}}，
								
								<text v-if="item.task_type==0">
									订单价格每{{item.tran_font_word}}{{item.tarn_price}}币
								</text>
								<text>
									订单价格共计{{parseInt(item.money)}}币
								</text>
				<!-- 				订单价格每{{item.tran_font_word}}{{item.tarn_price}}元 -->
							
							</view>
							<view class="bom">截稿时间：{{item.end_time.substring(0,17)}} 类型：{{item.c_desc}}</view>
							
						</view>
					</view>
					
					<view class="navs">
						<view class="icon xie">写</view>
						<view class="navs_right">
							<view class="tp">写手等级为：【{{array_level_arr(item.level)}}】</view>
							<view class="bom">写手性别要求：{{item.sex==0?"不限":(item.sex==1?"男":"女")}}
								{{item.is_bao==0?"":'用户要求作品保密'}}
							</view>
						</view>
					</view>
					<view class="con_bomt">
						<span>制作要求：</span>
						{{item.c_content}}
					</view>
					
					
				</view>
				<view class="bomt" v-if="item.status==0">
					<view class="bomt_a_left">此订单全额稿费预计</view>
					<view class="bomt_a_right">
						{{item.money}}
						</view>
				</view>
				<view v-if="item.status>0" class="zw">
				
				</view>	
					
				
				<view class="bomt_one" v-if="item.is_qiang==0&&item.status==0">
					<view @tap.stop="no_order(item)">不感兴趣</view>
					<view  @tap.stop="apply_order(item)">申请抢单</view>
				</view>
				<view class="bomt_one"  v-if="item.is_qiang==1&&item.status==0">
					<view @tap.stop="tuichu_order(item)">退出抢单</view>
					
					<view @tap.stop="$go('/task/list/my_order_dea?id='+item.id)" >查看详情</view>
				</view>
							
			</view>
		</view>
		
		<view v-if="show1" class="zong">
			<view  class="biaoqian">
				<view class="top">
					<image :src="userInfo.pic | formatImgUrl" mode=""></image>
					<view>{{userInfo.username}}</view>
					<view>申请抢单</view>
				</view>
				<view class="tab">
					<textarea  placeholder-class="c1" v-model="form.cont" placeholder="可填写任意内容供付款方查看"></textarea>
				</view>
				<view class="not_like" v-if="item.is_qiang!=1&&form.img">
					<view class="tp">如有例文展示，请上传（选填）</view>
				
					<view class="imgView">
						<!-- <view v-for="(img,index) in form.img" class="imgList">
							<image :src="img | formatImgUrl" mode="aspectFill" style="width: 105rpx;height: 105rpx;"></image>
							<view class="imgClose" @click="deletePic(index)">×</view>
						</view>
						<image :src="'/images/up.png' | formatImgUrl" mode="widthFix" style="width: 110rpx;height: 110rpx;"
							@click="onChooseImg" v-if="form.img&&form.img.length < 9"></image> -->
							
						<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="9" width="100" height="100" :action="uploadImgUrl" :fileList="form.img" @afterRead='afterRead' @delete="deletePic">
						</u-upload>
					</view>
					
					
				</view>
				
				<view class="cont_t" >
					<view class="t1" @click="qr_order()">
						<view class="tex">
							申请抢单
						</view>
					</view>
				</view>
			
				<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
		</view>
		
		<view v-if="show1" @click="show1=false" class="zhezhao">
		</view>
		
		<view class="zhanwei"></view>
		<view class="tarb_new">
			<view class="tar_home"  @click="go_home()">
				<image :src="tar_index==0?'../static/image/tar_home1.png':'../static/image/tar_home.png'" mode="aspectFit"></image>
				<view>
					首页
				</view>
			</view>
			<view class="tar_order">
				<image :src="tar_index==0?'../static/image/tar_order.png':'../static/image/tar_order1.png'" mode="aspectFit"></image>	
				<view>
					订单
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				tar_index:1,
				type:0,
				show1:false,
				form: {
					img: [],
					cont:"",
					id:""
				},
				list: [],
				page: 1,
				info:{},
				userInfo: this.$db.get('userInfo'),
				titleStyle: {
					color: '#000'
				},
				fileList2: [],
				totalPage: true
			}
		},
		onReachBottom() {
			this.get_list();
		},
		onPullDownRefresh() {
			setTimeout(function() {
					uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
				this.page = 1;
				this.list = [];
				this.get_list()
		},
		onLoad() {
			
		
		},
		onShow() {
			console.log(1111111);
			
			this.page = 1;
			this.list = [];
			this.get_list()
		},
		created() {
		   let that = this;
		},
		onBackPress(e) {
			console.log(e,222);
		},
		methods: {
			$back(){
				uni.navigateBack({
					delta: 2
				})
			},
			no_order(item){
				let str = "【不感兴趣将不再显示该订单】";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否设置不感兴趣？'+str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_nolike', {id:item.id}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('操作成功');
								
									_this.page = 1;
									_this.list = [];
									_this.get_list()
						
									return;
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
				
			},
			tuichu_order(item){
				let str = "是否确认退出抢单";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否'+str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_qx', {id:item.id}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('退出成功');
								
											_this.page = 1;
											_this.list = [];
											_this.get_list()
						
									return;
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
				
			},
			qr_order(){
				if(this.form.cont == "" || this.form.cont == "  "){
					this.$common.errorToShow('抢单原因必填');
					return;
				}
				this.form.id = this.info.id;
				
				this.form.img = this.fileList2
				
				let str = "确认抢单";
				let _this = this;
				uni.showModal({
					// cancelText: '取消',
					// confirmText: '确定',
					confirmColor: '#45C4B0',
					content: '是否'+str,
					success: function(res) {
						if (res.confirm) {
							
							_this.$api.default.request('task/order_apply', _this.form).then((res) => {
								if (res.code) {
									_this.show1 = false;
									_this.$common.errorToShow('支付成功');
									setTimeout(function() {
											
											uni.navigateTo({
												url: '/task/list/my_orderlist'
											})
									}, 600);
									return;
								
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
			},
			apply_order(item){
				this.info = item;
				this.form = {
					img: [],
					cont:"",
					id:""
				}
				this.show1 = true
			},
			getDateStr(mss,type){
					    var days = parseInt(mss / 86400);
						var hours = parseInt((mss-(days*86400))/3600);
						var minutes = parseInt((mss-(days*86400)-(hours*3600))/60);
						var seconds = mss-(days*86400)-(hours*3600) - (minutes * 60)
						
						 if(type == 0){
						 	 return days;
						 }
						 if(type == 1){
							  return hours;
						 }
						 if(type == 2){
						 	  return minutes;
						 }
						 if(type == 3){
							  return seconds;
						 }
					
			},	
			array_level_arr(index){
			
					var array_level = ['不限', '1-10', '11-20','21-30','21-30','31-40','41-50'];
					return array_level[index];
			},
			get_list(){
				var _this = this;
				this.$api.default.request('task/my_task_orderList', {
					page: this.page,
					type: this.type
				}).then((res) => {
					if (res.code) {
					
						 if(res.data.data){
							if (_this.list != null) {
								// this.articleList.concat(res.data.data);
								_this.list = _this.list.concat(res.data.data);
								// res.data.data.forEach((item) => {
								// 	this.logList.push(item)
								// })
							} else {
								_this.list =	res.data.data;
							}
							_this.page++; // 页数加一，加载下一页数据
						}
					}
					
					_this.totalPage = false
				})
			},
			close() {
				this.show = false
			},
			
			// 删除图片
			deletePic(index) {
				this.form.img.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.img.length
				lists.map((item) => {
					this.form.img.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.img[fileListLen]
					this.form.img.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
			onChooseImg() {
				let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.img.push(data)
					}
				}, 9)
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.$config.default.Url + '/agreement/1000009'
				})
			},
			go_home(){
				uni.navigateBack({//返回上一个页面
					delta: 1
				});
			},
			tz(type){
				console.log(type,77)
				this.type = type
				
				this.page = 1;
				this.list = [];
				this.get_list()
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.$config.default.Url + '/agreement/1000009'
				})
			},
			hidePay(e){
				console.log(e)
			},
			goPay(){
				
				this.$api.default.request('order/createvip', prams).then((res) => {
					if (res.code) {
						this.$common.wxPay(res.data, () => {
						
							that.$common.errorToShow('支付成功');
							setTimeout(function(){
								uni.navigateTo({
									url: '/pages/user/orderdetail?id=' + this.orderInfo.id
								})
							}, 800); 
						})
					}
				})
				
			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意用户协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f2f5f2;
	}
	.orderlist {
		/* #ifdef MP-WEIXIN */
		padding-top: calc(var(--status-bar-height) +  64px);
		/* #endif */
		/* #ifndef MP-WEIXIN */
		padding-top: calc(var(--status-bar-height) +  44px);
		/* #endif */
		
		
		.empytView{
			padding-top: 200rpx;
		}
		.zw{
			width: 100%;
			height: 30rpx;
			float: left;
		}
		.zhanwei{
			width: 100%;
			height: 100px;
			float: left;
		}
		width: 92%;
		margin-left: 4%;
		.top_nav{
			margin-top: 10px;
			font-size: 14px;
			width: 100%;
			float: left;
			position: relative;
			
			view{
				float: left;
				&:last-child{
					margin-left: 15px
				}
			};
		}
		.act{
			height: 4px;
			background: #45C4B0;
			width: 40px;
			position: absolute;
			top:22px;
			left: -5px;
			border-radius: 0.5em;
		}
		.act1{
			height: 4px;
			background: #45C4B0;
			width: 40px;
			position: absolute;
			top:22px;
			left: 65px;
			border-radius: 0.5em;
		}
		
		.cont{
			width: 100%;
			border-radius: 0.5em;
			background: #fff;
			margin-top: 13px;
			color: #3d3d3d;
			font-weight: 640;
			float: left;
			.cont_s{
				width: 90%;
				margin-left: 5%;
				.con_top{
					padding-top: 12px;
					width: 100%;
					font-size: 13px;
					float: left;
					padding-bottom: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
					view{
						float: left;
						&:last-child{
							float: right;
							color: #45C4B0;
							font-size: 13px;
							font-weight: 500;
						}
					}
					.ends{
						float: right;
						color: #45C4B0;
						font-size: 11px;
						font-weight: 500;
						background: rgba(69, 196, 176, 0.15);
						border-radius: 4px;
						padding: 3px 6px;
					}
				}
			}
			.con_nav{
				margin-top: 10px;
				width: 100%;
				float: left;
				.navs{
					.icon{
						width: 14px;
						height: 14px;
						border-radius: 6px;
						padding: 2px 3px;
						background: #45C4B0;
						float: left;
						font-size: 9px;
						line-height: 14px;
						color: #fff;
						text-align: center;
						position: relative;
						top:2px;
						margin-right: 5px;
					}
					.xie{
						background: #7AAAF2 !important;
					}
					.navs_right{
						.tp{
							font-size: 15px;
							width: 90%;
							overflow: hidden;   //隐藏
							white-space: nowrap;  //不换行
							text-overflow: ellipsis; //超出部分省略号
						}
						.bom{
							margin-left: 25px;
							width: 90%;
							color: #999;
							font-size: 12px;
							font-weight: 400;
							margin-top: 5px;
							margin-bottom: 10px;
						}
					}
				}
				.con_bomt{
					font-weight: 400;
					width: 86%;
					padding-left: 7%;
					padding-right: 7%;
					padding-bottom: 15rpx;
					background: rgba(216, 216, 216, 0.3);
					color: #999;
					font-size:10px;
					border-radius: 0.5em;
					padding-top: 5px;
					span{
						color: #45C4B0;
					}
					overflow-wrap:break-word
				}
			}
			.bomt{
				 margin-top: 12px;
				 padding-bottom: 8px;
				 border-bottom:  1px solid rgba(153, 153, 153, 0.1);;
				 float: left;
				 width: 100%;
				 font-size: 15px;
				.bomt_a_left{
					float: left;
				}
				.bomt_a_right{
					float: right;
					color: #45C4B0;
					 font-size: 16px;
					span{
						font-size: 12px
					};
				}
			}
			.bomt_one{
				width: 100%;
				float: left;
				margin-top: 20rpx;
				height: 100rpx;
				view{
					width: 290rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 0.2em;
					font-size: 26rpx;
					text-align: center;
					&:first-child{
						float: left;
						// margin-left: 10px;
						background: rgba(216, 216, 216, 0.3);
						color: #999;
					}
					
					&:last-child{
						float: right;
						// margin-right: 10px;
						background: #45C4B0;
						color: #fff;
					}
				}
			}
		}
		.tarb_new{
			position: fixed;
			bottom: 0px;
			background: #fff;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			left: 0px;
			height: 50px;
			width: 100%;
			padding-top: 10px;
			view{
				
				width: 50%;
				margin: 0 auto;
				float: left;
				text-align: center;
				
				image{
					
					margin: 0 auto;
					height: 20px;
					width: 28px;
				}
				view{
					font-size: 12px;
					width: 100%;
					text-align: center;
					float: left;
					color: #999999;
				}
				
			};
		}
	}
</style>